<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />

  <title>苏州同济医院_在线订餐</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/vue@2.6.11.js"></script>
  <script src="js/vant.min.js"></script>
  <script src="js/rem.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css" />
  <link href="css/layout.css" rel="stylesheet" />
</head>

<body>
  <div id="app">
    <div class="login">
      <img class="banner" src="images/ban.jpg" alt="">
      <van-collapse class="caipu-zd" v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div class="caipu">
              <img class="caipu-text" src="images/today.png" alt="">
              <span>套餐类</span><span>自选菜肴</span>
              <!-- <img class="caipu-arr" src="images/cp.png" alt=""> -->
            </div>
          </template>
          <van-icon class="caipu-cross" name="cross" size="2rem" @click="cross()"></van-icon>
          <h4>套餐类</h4>
          <p><strong>大荤：</strong>{{bigMeat}}</p>
          <p><strong>小荤：</strong>{{smallMeat}}</p>
          <p><strong>素菜：</strong>{{vegetable}}</p>
          <p><strong>主食：</strong>{{stapleFood}}</p>
          <h4 class="h4-2">自选菜肴</h4>
          <p class="zx-p" v-for="(item,index) in items">
            <strong>菜肴{{index + 1}}：</strong> {{item.name}} <span>￥{{item.price}}</span>
          </p>
        </van-collapse-item>
      </van-collapse>
      <h2 class="dc-title">员工在线订餐</h2>
      <div class="form">
        <label for="" class="sele" @click="currentTime()">
          <span>就餐日期</span>
          <div class="input">{{today}}</div>
        </label>
        <label v-if="verified == false">
          <span>就餐人</span>
          <div class="input">{{user}}</div>
          <div class="code-btn" @click="ChangeDiner()">更改就餐人</div>
        </label>
        <label for="" v-else>
          <span>手机号码</span>
          <input type="tel" v-model="tel" pattern="[0-9]*" oninput="value=value.replace(/[^\d.]/, '')"
            placeholder="请输入手机号">
        </label>
        <label for="" v-if="Logged !== true">
          <span>验证码</span>
          <input type="text" v-model="msgCode" pattern="[0-9]*" oninput="value=value.replace(/[^\d.]/, '')"
            placeholder="请输入短信验证码">
          <div class="code-btn" v-if="verifiedCode" @click="getCode()">获取验证码</div>
        </label>
        <label for="" class="sele" @click="menuHide()">
          <span>预订餐品</span>
          <div class="input">请选择餐品</div>
        </label>
      </div>
      <div class="bottom">
        <div class="shoppingCart" @click="menuHide()">
          <span>{{foodSum}}</span>
          <img src="images/cart.png" alt="">
        </div>
        <p>请到食堂刷卡取餐</p>
        <div class="submit" @click="submitForm()">立即提交</div>
      </div>
      <van-action-sheet v-model="menuShow" :round="false">
        <div class="delete" @click="clearNum">
          <span>
            <van-icon name="delete" />清除重选
          </span>
        </div>
        <div class="menu-content">
          <van-cell v-for="(menus,index) in menu" :key="index" :title="menus.text" v-if="menus.show == 1">
            <template #right-icon>
              <van-stepper v-model="menus.num" theme="round" min="0" button-size="22" disable-input default-value="0" />
            </template>
          </van-cell>
        </div>
      </van-action-sheet>
      <van-action-sheet v-model="datetime" :round="false">
        <van-picker show-toolbar title="选择就餐日期" :columns="columns" visible-item-count="3" @confirm="selectTime($event)"
          @cancel="currentTime()" />
      </van-action-sheet>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          menuShow: false,  //选餐窗口
          menu: [
            { text: "套餐", num: 0 },
            { text: "炒饭", num: 0 },
            { text: "砂锅", num: 0 },
            { text: "水饺", num: 0 },
            { text: "面条", num: 0 }
          ],
          datetime: false,  //选择日期窗口
          today: "请选择就餐日期",  //已选日期
          todayData: '', //已选日期对象
          verified: true,  //是否未验证过手机号
          verifiedCode: true, //获取验证码按钮
          Logged: false,  //登录状态
          columns: [  //选择时间窗口
            { values: [] },
            { values: ['午餐', '晚餐'] },
          ],
          user: '',
          tel: '',
          msgCode: '',
          activeNames: ['0'], //折叠菜单
          bigMeat: '',   //大荤
          smallMeat: '', //小荤
          vegetable: '', //素菜
          stapleFood: '',//主食
          items: [{ name: '', price: '' }], //自选
        };
      },
      mounted() {
        var date = new Date()
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var day = this.columns[0].values
        for (let i = 0; i < 7; i++) {
          let d = date.getDate() + i
          day.push(y + '/' + m + '/' + d)
        }
        if (localStorage.getItem('Logged') == 'true') {
          this.Logged = true
          this.user = localStorage.getItem('user')
          this.tel = localStorage.getItem('tel')
          if (this.user) {
            this.verified = false
          }
        }

        var thisDay = y + '-' + m + '-' + d
        $.getJSON('/http/get_caipu.php?jiucan_date=' + thisDay, function (data) {
          this.bigMeat = data.bigMeat;
          this.smallMeat = data.smallMeat;
          this.vegetable = data.vegetable;
          this.stapleFood = data.stapleFood;
          if (data.items.length !== 0) {
            this.items = data.items;
          } else {
            this.items = [{ name: '', price: '' }]
          }
        }.bind(this));
      },
      computed: {
        foodSum: function () {
          let sum = 0;
          for (let i = 0; i < this.menu.length; i++) {
            sum += this.menu[i].num;
          }
          return sum;
        }
      },
      methods: {
        //清除已选餐品
        clearNum() {
          for (let i = 0; i < this.menu.length; i++) {
            this.menu[i].num = 0;
          }
        },
        menuHide() {
          if (this.todayData == '') {
            this.$toast.fail('请选择就餐时间');
          } else {
            this.menuShow = !this.menuShow;
          }
        },
        currentTime() {
          this.datetime = !this.datetime;
        },
        //选择时间
        selectTime(e) {
          var orderDay = e[0].split('/')[2]
          var now = new Date().getHours();
          if (orderDay == new Date().getDate()) {
            if (e[1] == '午餐' && now >= 11) {
              this.$toast.fail('当天午餐请在11:00前预定');
              return false
            } else if (e[1] == '晚餐' && now >= 17) {
              this.$toast.fail('无法预定，已经超出当天可订餐时间');
              return false
            }
          }
          this.today = e[0] + ' ' + e[1]
          this.todayData = e
          this.currentTime();

          if (this.todayData[1] == '午餐') {
            this.menu = [
              { text: "套餐", num: 0, show: 1 },
              { text: "炒饭", num: 0, show: 0 },
              { text: "砂锅", num: 0, show: 0 },
              { text: "水饺", num: 0, show: 0 },
              { text: "面条", num: 0, show: 0 }]
          } else {
            this.menu = [
              { text: "套餐", num: 0, show: 1 },
              { text: "炒饭", num: 0, show: 1 },
              { text: "砂锅", num: 0, show: 1 },
              { text: "水饺", num: 0, show: 1 },
              { text: "面条", num: 0, show: 1 }]
          }
        },
        //获取验证码
        getCode() {
          if (this.tel == '') {
            this.$toast.fail('请填写手机号码');
            return false
          }
          $.ajax({
            type: 'post',
            url: '?act=getcode&tel=' + this.tel + "&r=" + Math.random(),
            success: (r) => {
              if (r == "手机号未被授权！") {
                this.$toast.fail(r);
              } else {
                this.showUser(r)
              }
            }
          });
        },
        //更改就餐人
        ChangeDiner() {
          localStorage.setItem("user", '');
          this.Logged = false
          localStorage.setItem("Logged", false);
          this.verified = true
          this.verifiedCode = true
        },
        //提交表单
        submitForm() {
          if (this.today == "请选择就餐日期") {
            this.$toast.fail('请选择就餐日期');
            return false
          }
          if (this.Logged != true) {
            if (this.tel == '') {
              this.$toast.fail('请验证手机号码');
              return false
            }
            if (this.msgCode == '') {
              this.$toast.fail('请填写验证码');
              return false
            }
          }
          if (this.foodSum == 0) {
            this.$toast.fail('请选择餐品');
            return false
          }
          var data = {
            act: 'save',
            tel: this.tel,
            code: this.msgCode,
            jiucan_date: this.todayData[0],
            jiucan_time: this.todayData[1],
            yudingxinxi: JSON.stringify(this.menu)
          }
          var text = ''
          for (let i = 0; i < this.menu.length; i++) {
            if (this.menu[i].num > 0) {
              text += this.menu[i].text + this.menu[i].num + '份;'
            }
          }
          this.$dialog.confirm({
            title: '您确定要预定' + this.todayData[0] + '的' + this.todayData[1] + '吗？',
            message: text,
          })
            .then(() => {
              $.ajax({
                type: "POST",
                url: "?act=save",
                data: data,
                success: (r) => {
                  console.log(r);
                  //alert(r);
                  //if (r == "验证码错误"){
                  if (r.indexOf("验证码错误") != -1) {
                    this.$toast.fail('验证码错误！');
                    //}else if (r == "是否覆盖") {
                  } else if (r.indexOf("是否覆盖") != -1) {
                    //若记录存在
                    var re = confirm("您已预定过，是否覆盖已预定餐品");
                    if (re == true) {
                      $.ajax({
                        type: "POST",
                        url: "?act=save&update=1",
                        data: data,
                        success: (res) => {
                          this.$toast.success('更改成功')
                        },
                        error: (e) => {
                          this.$toast.fail('提交失败');
                          console.log(e);
                        }
                      })
                    }
                    else {
                      return false
                    }
                  } else {
                    this.verified = false
                    localStorage.setItem("user", this.user);
                    localStorage.setItem("Logged", true);
                    this.Logged = true
                    this.$toast.success('预定成功');
                  }
                },
                error: (error) => {
                  this.$toast.fail('提交失败');
                  console.log(error);
                }
              })
            })
            .catch(() => {
              // on cancel
            });
        },
        showUser(r) {
          if (!r) {
            return false
          } else {
            this.user = r
            localStorage.setItem("tel", this.tel);
            this.verified = false
            this.verifiedCode = false
          }
        },
        cross() {
          this.activeNames = ['0']
        }
      }
    })
  </script>
</body>

</html>